import { reactive, ref, type Ref } from "vue";
import { defineStore } from "pinia";
import type { Component, ComponentParams, Pos } from "@visual/types";
import componentList from "@visual/custom-component/component-list";
import { cloneDeep } from "@pureadmin/utils";

export const useComponent = defineStore("component", () => {
  const componentData: Ref<Component[]> = ref([]);
  const curComponent: Ref<Component | undefined | null> = ref();
  const curComponentIndex: Ref<number | undefined | null> = ref();
  const rightList: Ref<Boolean> = ref(true);
  function addComponent({ component, index }: ComponentParams) {
    if (!component) return;
    if (typeof index === "number") {
      componentData.value.splice(index, 0, component);
    } else {
      componentData.value.push(component);
    }
  }
  function isShowRightList() {
    rightList.value = !rightList.value;
  }
  function setCurComponentProps({ key, val }: { key: string; val: any }) {
    if (!curComponent.value) return;
    curComponent.value.propValue[key] = val;
  }
  function setCurComponentData(compData: Component) {
    if (!curComponent.value) return;
    addUniqueProperties(curComponent.value, compData);
  }
  function setCurComponent({ component, index }: ComponentParams) {
    // 方便开发人员获取选中的组件信息
    // console.log("当前选中组件为：", component);
    curComponent.value = component;
    curComponentIndex.value = index;
    if (curComponent.value) {
      let compConfig = componentList.find(item => item.component === curComponent.value.component);
      if (compConfig) {
        compConfig = cloneDeep(compConfig);

        setCurComponentData(compConfig);
      }
    }
  }
  function setCurComponentLockStatus(status: boolean) {
    if (!curComponent.value) return;
    curComponent.value.isLock = status;
  }
  function toggleComponentShow(index) {
    if (!componentData.value[index]) return;

    componentData.value[index].isShow = !componentData.value[index].isShow;
  }
  function setComponentData(compData: Component[] = []) {
    componentData.value = compData;
  }
  function setShapeStyle({ top, left, width, height, rotate }: Pos) {
    if (!curComponent.value) return;
    if (top) curComponent.value.style.top = Math.round(top);
    if (left) curComponent.value.style.left = Math.round(left);
    if (width) curComponent.value.style.width = Math.round(width);
    if (height) curComponent.value.style.height = Math.round(height);
    if (rotate) curComponent.value.style.rotate = Math.round(rotate);
  }

  function setShapeSingleStyle({ key, value }) {
    if (!curComponent.value) return;
    curComponent.value.style[key] = value;
  }

  // 点击画布时是否点中组件，主要用于取消选中组件用。
  // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
  const isClickComponent = ref(false);
  function setClickComponentStatus(status) {
    isClickComponent.value = status;
  }

  function deleteComponent(index?) {
    if (index === undefined) {
      index = curComponentIndex.value;
    }

    if (index === curComponentIndex.value) {
      curComponentIndex.value = null;
      curComponent.value = null;
    }
    console.log("deleteComponent", index, /\d/.test(index));
    if (/\d/.test(index)) {
      componentData.value.splice(index, 1);
    }
  }

  // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
  const isInEdiotr: Ref<boolean> = ref(false);
  function setInEditorStatus(status) {
    isInEdiotr.value = status;
  }
  // 编辑器模式 edit preview
  const editMode = ref("edit");
  function setEditMode(mode) {
    editMode.value = mode;
  }

  let canvasStyleData = reactive({
    // 页面全局数据
    width: 2000,
    height: 1500,
    scale: 100,
    color: "#000",
    opacity: 1,
    background: "#fff",
    fontSize: 14
  });
  function setCanvasStyle(style = {}) {
    if (style && typeof style === "object") {
      Object.assign(canvasStyleData, style);
    }
  }
  function addEvent(data) {
    if (!curComponent.value) return;
    curComponent.value.events = data;
  }

  function removeEvent() {
    if (!curComponent.value) return;
    // delete curComponent.value.events[event];
  }
  function changeDataAliase(data) {
    if (!curComponent.value) return;
    curComponent.value.dataAliase = data;
  }
  function changeDataBinding(data) {
    if (!curComponent.value) return;
    curComponent.value.dataBinding = data;
  }
  function addUniqueProperties(obj1, obj2) {
    function addObjectProperties(target, source) {
      for (let key in source) {
        if (source.hasOwnProperty(key) && (!target.hasOwnProperty(key) || typeof target[key] === "object")) {
          if (typeof source[key] === "object" && source[key] !== null && typeof target[key] === "object" && target[key] !== null) {
            addObjectProperties(target[key], source[key]);
          } else {
            target[key] = source[key];
          }
        }
      }
    }

    addObjectProperties(obj1, obj2);
    return obj1;
  }

  return {
    canvasStyleData,
    componentData,
    curComponent,
    curComponentIndex,
    isClickComponent,
    isInEdiotr,
    editMode,
    rightList,
    isShowRightList,
    setCurComponentProps,
    setCurComponentData,
    setCurComponentLockStatus,
    addComponent,
    setCurComponent,
    setComponentData,
    setShapeStyle,
    setShapeSingleStyle,
    setClickComponentStatus,
    deleteComponent,
    setInEditorStatus,
    setEditMode,
    setCanvasStyle,
    addEvent,
    removeEvent,
    changeDataBinding,
    changeDataAliase,
    toggleComponentShow
  };
});
